<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo-item-same-height.html</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .c {
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        display: flex;
        flex-direction: column;
        flex: 1 1 300px;
        background: #eee;
      }
      .box > p {
        flex: 1;
      }
      .box > div:nth-last-child(1) {
        /* background: red; */
        /* margin-top: auto; */
        text-align: center;
        /* align-self: center; */
      }
      .box > div:nth-last-child(1) > button {
        background: #6cdba9;
        padding: 8px 64px;
        color: white;
        font-size: 20px;
        border: none;
        margin: 8px 0;
      }
      .box > img {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="c">
      <div class="box">
        <img src="./img/compass.png" alt="" />
        <h2>表体检费</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
          natus dolores! Quis, illo alias error animi necessitatibus cumque
          nostrum nulla excepturi architecto, qui omnis commodi voluptates.
          Praesentium voluptatibus quos alias! Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Ipsum laudantium voluptas sequi dolorum
          accusantium est culpa obcaecati! A tempora qui voluptatibus assumenda
          provident, unde quo distinctio. Corporis vero culpa ut.
        </p>
        <div>
          <button>1</button>
        </div>
      </div>
      <div class="box">
        <img src="./img/compass.png" alt="" />
        <h2>表体检费产地看法开机饭2323232店</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
          natus dolores! Quis, illo alias error animi necessitatibus cumque
          nostrum nulla excepturi architecto, qui omnis commodi voluptates.
          Praesentium voluptatibus quos alias!
        </p>
        <div>
          <button>1</button>
        </div>
      </div>
      <div class="box">
        <img src="./img/compass.png" alt="" />
        <h2>表体检费产地看法开机饭店</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
          natus dolores! Quis, illo alias error animi necessitatibus cumque
          Praesentium voluptatibus quos alias!
        </p>
        <div>
          <button>1</button>
        </div>
      </div>
    </div>
  </body>
</html>
